// App.vue
<script setup>
import { onMounted, onUnmounted } from 'vue'

// const sakuraContainer = ref(null)
let sakuras = []
let animationFrames = []

class Sakura {
  constructor() {
    this.x = Math.random() * window.innerWidth
    this.y = -10
    this.r = (Math.random() * 2) + 1.5
    // 增加基础不透明度，使颜色更深
    this.opacity = Math.random() * 0.3 + 1.5  // 调整为 0.5-0.8 的范围
    this.speedX = (Math.random() * 1) - 0.5
    this.speedY = (Math.random() * 0.8) + 0.4
    this.rotation = Math.random() * 360
    this.rotationSpeed = (Math.random() - 0.5) * 1

    // 随机选择三种不同深浅的粉色
    const colors = [
      [255, 183, 197],  // 深一点的粉色
      [255, 198, 208],  // 中等的粉色
      [255, 213, 218]   // 浅一点的粉色
    ]
    this.color = colors[Math.floor(Math.random() * colors.length)]
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate((this.rotation * Math.PI) / 180)

    // 使用随机选择的颜色
    ctx.fillStyle = `rgba(${this.color[0]}, ${this.color[1]}, ${this.color[2]}, ${this.opacity})`

    ctx.beginPath()
    ctx.ellipse(0, 0, this.r * 2, this.r, 0, 0, Math.PI * 2)
    ctx.fill()

    ctx.restore()
  }

  update() {
    this.y += this.speedY
    this.x += this.speedX + Math.sin(this.y / 100) * 0.3
    this.rotation += this.rotationSpeed

    if (this.y > window.innerHeight || this.x < -50 || this.x > window.innerWidth + 50) {
      this.x = Math.random() * window.innerWidth
      this.y = -10
      this.speedX = (Math.random() * 1) - 0.5
      this.speedY = (Math.random() * 0.8) + 0.4
      // 重置时重新随机选择颜色
      const colors = [
        [255, 183, 197],
        [255, 198, 208],
        [255, 213, 218]
      ]
      this.color = colors[Math.floor(Math.random() * colors.length)]
    }
  }
}

const initSakura = () => {
  const canvas = document.createElement('canvas')
  canvas.style.position = 'fixed'
  canvas.style.top = '0'
  canvas.style.left = '0'
  canvas.style.pointerEvents = 'none'
  canvas.style.zIndex = '1'
  document.body.appendChild(canvas)

  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', resizeCanvas)
  resizeCanvas()

  const ctx = canvas.getContext('2d')
  // 增加花瓣数量到 150 个
  sakuras = Array.from({ length: 150 }, () => new Sakura())

  const animate = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    sakuras.forEach(sakura => {
      sakura.update()
      sakura.draw(ctx)
    })
    animationFrames.push(requestAnimationFrame(animate))
  }

  animate()

  return () => {
    window.removeEventListener('resize', resizeCanvas)
    document.body.removeChild(canvas)
    animationFrames.forEach(frame => cancelAnimationFrame(frame))
    animationFrames = []
  }
}

onMounted(() => {
  const cleanup = initSakura()
  onUnmounted(() => {
    if (cleanup) cleanup()
  })
})
</script>

<template>
  <div class="tech-container">
    <router-view class="router-view-container"></router-view>
  </div>
</template>

<style scoped>
.tech-container {
  min-height: 100vh;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.router-view-container {
  position: relative;
  z-index: 2;
}
</style>
